<template>
  <!-- 这个搜索框是采用父传子，子传父的形式 -->
  <div ref="searchBox" class="main" style="width: 100%;height:100%;border:1px solid #D6D6D6;background-color: aliceblue;">
    <div style="float: left;font-size: 13px;position: absolute;user-select: none;margin-left: 6px;">数据检索</div>
    <div style="float: right; margin-right: 5px;" @click="handleClose">
      <el-button type="success" style="width: 16px;height: 16px;" icon=CloseBold circle />
    </div>
    <div class="main-title"
    style="width: 100%;height: 20px;   ">
    <!-- 这里弄了一个插槽，在父组件调用的时候，插入一个标题行，然后吧拖拽事件，放到这个标题上面这样只能按住标题拖动 -->
    <slot name="main-title">
    </slot>
    </div>  

    <div style="width: 100%;height:  40px;border-left: 2px solid darkseagreen;
        border-right: 2px solid darkseagreen;padding-left: 4px;padding-right: 4px;
        padding-top: 4px;">
        <vxe-input 
          ref="searchInput"
          v-model="searchValue" 
          @change="(event) => shuruchangeSrarch(event, props.data, props.dataCell)" 
          style="width: 100%;"
          placeholder="请输入简码或者名称进行检索">
        </vxe-input>
    </div>

    <div style="width: 100%;height: calc(100% - 75px);
        border-left: 2px solid darkseagreen;border-right: 2px solid darkseagreen;">
        <vxe-table border 
          ref="tableRef" 
          :row-config="{ isCurrent: true, isHover: true }"
          :column-config="{ resizable: true }" 
          :edit-config="{ mode: 'cell', trigger: 'click' }" 
          :data="datalist"
          :scroll-y="{enabled: true, gt: 0}"
          :scroll-x="{enabled: true, gt: 0}" 
          :height=props.searchObjh 
          show-overflow
          show-header-overflow
          show-footer-overflow
          style="width: 100%;cursor: pointer;user-select: none;"
          @cell-dblclick="xuanzhongOk">
          <vxe-column 
            v-for="(item, index) in props.tableTitle" 
            align="center" 
            :key="index" 
            :field="item.value"
            :title="item.label" 
            :width="item.widths" />
          </vxe-table>
    </div>
    <div style="float: right; bottom: 0px;right: 2px; position: absolute;width: 14px;height: 15px;"> 
      <slot name="main-bottom">
      </slot>
    </div>
    <div class="main-title" style="width: 100%;height: 15px;
        background: darkseagreen;padding-left: 8px;padding-right: 8px;font-size:12px">
        共{{ datalist.length  }}条记录
    </div>
  </div>
</template>

<script setup>
import { defineEmits, defineProps, onMounted, defineExpose } from 'vue';
import { forGetFun1 } from '@/components/TableSearch/js/forFun.js';
const searchBox=ref(null);
const searchValue = ref('');
const props = defineProps({
  data: {
    default: []
  },
  tableTitle: {
    default: [{ value: '', label: '', widths: '' }]
  },
  dataCell: {
    default: []
  },
  inputValue: {
    type: String
  },
  searchObjw: {
    type: String
  },
  searchObjh:{
    type: String
  }
});
//定义一个传给父级的close关闭方法和选择数据的方法
const emits = defineEmits(['close', 'xuanzhong']);
//定义一个子组件关闭方法，该方法执行的时候触发传给父级的close方法
const handleClose = () => {
  emits('close');
};
//定义一个选择方法，双击行的时候给父组件传一个xuanzhong方法和当前行的数据
const xuanzhongOk = (row) => {
  emits('xuanzhong', row.row);
};
//A定义一个数据源数组变量，记录搜索框里面要显示的数据源，并传给搜索框
let datalist = ref([]);
let oldvalue = '89';
const shuruchangeSrarch = (value, data1, datacell) => {
  //获取此时输入值的行号，进而获取数组的序号
  if (value.value.trim() != oldvalue) {
    oldvalue = value.value
    if (value.value.trim() != '') {
      datalist = forGetFun1(value.value, data1, datacell);
    }
  }
};
const shuruchangeSrarchOne = () => {
  //console.log('打开搜索框根据外侧输入框输入的第一个字符进行搜索比，避免输入一串字符后，弹出的搜索框什么都没有还要再输入一次')
  datalist = forGetFun1(props.inputValue, props.data, props.dataCell);
  //console.log(datalist)
};
onMounted(() => {
  seTSrarchJiaoDian();
  searchValue.value = props.inputValue;
  shuruchangeSrarchOne();
});

const searchInput = ref(null)
const seTSrarchJiaoDian = () => {
  //console.log("获取焦点");
  searchInput.value.focus();
}
//创建一个计算属性，用于父组件获取搜索框的样式，然后暴露出去
const searchBoxStyle = computed(() => {
  return searchBox.value?.style || {};
});
//导出一个获取焦点的方法，父组件显示搜索框的时候调用
defineExpose({
  seTSrarchJiaoDian,
  searchBoxStyle 
});

</script>

<style lang='scss' scoped>

</style>
